<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" th:href="@{/dist/plugins/bootstrap/css/bootstrap.min.css}"/>
    <!--jqueryUI -->
    <link rel="stylesheet" th:href="@{/dist/plugins/jQueryUI/jquery-ui.css}">
    <!--滑动块-->
    <link rel="stylesheet" type="text/css" th:href="@{/dist/css/indexScro.css}"/>
    <style>
        div.center, p.center, img.center {
            margin-left: auto!important;
            margin-right: auto!important;
            float: none!important;
            display: block;
            text-align: center;
        }
        .well {
            position: absolute;
            top:30%;
            left: 430px;
            font-size: 20px;
            min-height: 20px;
            padding: 19px;
            margin-bottom: 20px;
            background-color: #f5f5f5;
            border: 1px solid #e3e3e3;
            border-radius: 20px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
        }
        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        fieldset {
            min-width: 0;
            padding: 0;
            margin: 0;
            border: 0;
        }
        fieldset {
            padding: .35em .625em .75em;
            margin: 0 2px;
            border: 1px solid silver;
        }
        .input-group {
            position: relative;
            display: table;
            border-collapse: separate;
        }
        .login-box .input-prepend {
            margin-bottom: 10px;
        }
        .remember {
            margin-top: 3px;
        }
        .login-box .btn {
            margin-top: 15px;
            width: 100%;
        }
        .red{
            color:#B94846;
        }
        #code{
            overflow: hidden;
            float: left;
            width: 40%;
            height: 46px;
            margin-left: 20px;
        }
        #inputCode{
            width: 30%;
            float: left;
        }
        .codeCheckResult{
            width: 20%;
            float: left;
            height: 40px;
            margin-left: 20px;
            line-height: 40px;
            border-radius: 15px;
        }
        .demo-2 .large-header {
            background-color: #95a5a6;
            background-position: center bottom;
        }
    </style>
</head>
<body>
    <div class="demo-2">
            <div class="content">
                <div id="large-header" class="large-header">
                    <canvas id="demo-canvas"></canvas>
                </div>
            </div>
            <div class="well col-md-5 center login-box">
                <div class="alert alert-info">
                    <span th:if="${param}">请输入账号与密码!</span>
                    <div class="clearfix"></div>
                    <span class="errorInfo" th:if="${param.error}" th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}">
                        密码错误
                    </span>
                    <span th:if="${param.logout}">
                        注销成功
                    </span>
                </div>
                <form class="form-horizontal"  method="post" th:action="@{/login}" >
                    <fieldset>
                        <div class="clearfix"></div><br>
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user red"></i></span>
                            <input type="text" class="form-control" placeholder="Username" name="username">
                        </div>
                        <div class="clearfix"></div><br>
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock red"></i></span>
                            <input type="password" class="form-control" placeholder="Password" name="password">
                        </div>
                        <div class="clearfix"></div><br>
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock red"></i></span>
                            <input id="inputCode" type="text" class="form-control" placeholder="请输入验证码"/>
                            <span id="code" class="mycode"></span>
                            <label class="alert-info codeCheckResult" style="display: none"></label>
                        </div>
                        <div class="clearfix"></div>
                        <p class="center col-md-5">
                            <a class="btn btn-primary" id="checKCodeBtn" style="display: none;"></a>
                            <button type="submit" class="btn btn-gray" id="submit" disabled>登录</button>
                        </p>
                    </fieldset>
                </form>
            </div>
    </div>
    <script type="text/javascript" th:src="@{/dist/plugins/jQuery/jquery-2.2.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/dist/js/login/rAF.js}"></script>
    <script type="text/javascript" th:src="@{/dist/js/login/demo-2.js}"></script>
    <script type="text/javascript" th:src="@{/dist/js/login/js.KinerCode.js}"></script>
<script>
    document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
    //自定义登录错误信息
    $('#inputCode').bind('input propertychange', function() {
        var checkCodeLength = $(this).val().length;
        if(checkCodeLength==4){
            document.getElementById("checKCodeBtn").click();
        }else if(checkCodeLength>4){
            document.getElementById("checKCodeBtn").click();
            $('.codeCheckResult').show();
            $('.codeCheckResult').html("验证失败!");
        }
    });
    function subSomething() {
//        用户名不存在:UsernameNotFoundException;
//        密码错误:BadCredentialException;
//        帐户被锁:LockedException;
//        帐户未启动:DisabledException;
//        密码过期:CredentialExpiredException;
        //当页面加载状态
        if(document.readyState == 'complete') {
            var text = $('.errorInfo').text();
            if(text=='Bad credentials'){
                $('.errorInfo').text('密码错误');
            }
        }
    }
    var inp = document.getElementById('inputCode');
    var code = document.getElementById('code');
    var checKCodeBtn = document.getElementById('checKCodeBtn');
//    var submit = document.getElementById('submit');
    var c = ["+", "-", "*", "/"];
    var arr = [];

    for (var i = 0; i < 1000; i++) {

        var num = parseInt(Math.random() * 100 + 1);
        var num2 = parseInt(Math.random() * 100 + 1);
        var num3 = parseInt(Math.random() * 4);

        if (c[num3] === '/') {
            var x = num % num2;
            if (x != 0) {
                num -= x;

                if(num==0){
                    var temp = num;
                    num2 = num;
                    num = temp;
                }

            }
        }

        if(num==0&&num==0){
            continue;
        }

        var str = num + c[num3] + num2;

        arr.push(str);

    }
    //======================插件引用主体
    var c = new KinerCode({
        len: 4,//需要产生的验证码长度
//        chars: ["1+2","3+15","6*8","8/4","22-15"],//问题模式:指定产生验证码的词典，若不给或数组长度为0则试用默认字典
        chars: [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 0,
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
        ],//经典模式:指定产生验证码的词典，若不给或数组长度为0则试用默认字典
        question: false,//若给定词典为算数题，则此项必须选择true,程序将自动计算出结果进行校验【若选择此项，则可不配置len属性】,若选择经典模式，必须选择false
        copy: false,//是否允许复制产生的验证码
        bgColor: "",//背景颜色[与背景图任选其一设置]
        bgImg: "",//若选择背景图片，则背景颜色失效
        randomBg: false,//若选true则采用随机背景颜色，此时设置的bgImg和bgColor将失效
        inputArea: inp,//输入验证码的input对象绑定【 HTMLInputElement 】
        codeArea: code,//验证码放置的区域【HTMLDivElement 】
        click2refresh: true,//是否点击验证码刷新验证码
        false2refresh: true,//在填错验证码后是否刷新验证码
        validateObj: checKCodeBtn,//触发验证的对象，若不指定则默认为已绑定的输入框inputArea
        validateEven: "click",//触发验证的方法名，如click，blur等
        validateFn: function (result, code) {//验证回调函数
            $('.codeCheckResult').show();
            if(result){
                $('.codeCheckResult').html("验证通过!");
                $('#submit').removeClass('btn-bray');
                $('#submit').addClass('btn-primary');
                $('#submit').removeAttr('disabled');
            }else{
                $('.codeCheckResult').html("验证失败!");
                $('#submit').removeClass('btn-primary');
                $('#submit').addClass('btn-bray');
                $('#submit').attr('disabled','disabled');
            }
        }
    });
</script>
</body>
</html>